<template>
  <div class="color-bar">
    <template v-if="isReverse">
      <div class="txt1">高</div>
      <div class="txt2">低</div>
    </template>
    <template v-else>
      <div class="txt2">高</div>
      <div class="txt1">低</div>
    </template>
    <div
      class="bars"
      :style="{ transform: `rotate(${isReverse ? '180deg' : '0deg'})` }"
    >
      <div
        v-for="color in colors"
        :key="color"
        class="item"
        :style="{ 'background-color': color }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import gradstop from "gradstop";

const colors = ref([]);
const isReverse = ref(false);

const getThreshold = () => {
  const gradient = gradstop({
    stops: 20,
    inputFormat: "hex",
    colorArray: ["#1d39c4", "#0958d9", "#08979c", "#7cb305"],
  });

  const gradient2 = gradstop({
    stops: 20,
    inputFormat: "hex",
    colorArray: ["#7cb305", "#fadb14", "#fa8c16", "#f5222d"],
  });
  let gradients = [...gradient, ...gradient2];
  colors.value = gradients;
};
onMounted(() => {
  getThreshold();
});

const setReverse = () => {
  isReverse.value = true;
};

defineExpose({
  setReverse,
});
</script>

<style lang="less" scoped>
.color-bar {
  z-index: 10;

  position: relative;
  color: #fff;
  // border: 1px solid #e8e8e8;
  border-radius: 2px;

  .bars {
    display: flex;
    width: 24px;
    flex-direction: column;
    height: 200px;
  }
  .item {
    flex: 1;
  }
  font-size: 12px;
  .txt1 {
    z-index:2;
    position: absolute;
    top: 2px;

    width: 100%;
    text-align: center;
    //   left: -4px;
  }

  .txt2 {
    z-index:2;
    position: absolute;
    bottom: 2px;
    width: 100%;
    text-align: center;

    //   left: -4px;
  }
}
</style>
